<template>
	<view>
		<scroll-view   scroll-x="true" scroll-y="true">
			<uni-table ref="table" border stripe>
				<uni-tr style="height: 20px">
					<uni-th width="100" align="center">用户名称</uni-th>
					<uni-th width="50" align="center">期号</uni-th>
					<uni-th width="150" align="center">项目名称</uni-th>
					<uni-th width="100" align="center">浏览次数</uni-th>
					<uni-th width="100" align="center">盈利</uni-th>
					<uni-th width="100" align="center">佣金</uni-th>
					<uni-th width="100" align="center">中奖状态</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.userName }}</uni-td>
					<uni-td align="center">{{ item.lotteryNo }}</uni-td>
					<uni-td align="center">{{ projectName }}</uni-td>
					<uni-td align="center">{{ item.count }}</uni-td>
					<uni-td align="center">{{getProfit(item)}}</uni-td>
					<uni-td align="center">{{ item.commission }}</uni-td>
					<uni-td align="center" ><view @click="toView(item)" v-html="changeFlag(item)"></view></uni-td>
				</uni-tr>
			</uni-table>
		</scroll-view>
		<view>
			<uni-popup ref="alertDialog" background-color="#fff" type="bottom">
				<uni-row class="textzhu">
					<uni-col class="center-col">
						<text class="content">
							共
							<text class="zhu">{{ this.resultContent.length }}</text>
							注，
						</text>
						<text>
							共
							<text class="zhu">{{ this.resultContent.length * 2 }}</text>
							元
						</text>
					</uni-col>
				</uni-row>
				<uni-card>
					<scroll-view style="height:400px" class="scrollview dialogue-box" scroll-y="true" scroll-x="true">
						<view v-for="(number, index) in resultContent" :key="index">
							<text class="spliceAllText">{{ number }}</text>
						</view>
					</scroll-view>
				</uni-card>
				<uni-row :gutter="10" style="padding-bottom:10px ;">
					<uni-col  >
						<button style="width: 75%;" @click="copyData()">
							<text class="buttontext">复制</text>
						</button>
					</uni-col>
				</uni-row>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tableData: [],
			phoneNumber:'', // 电话号码
			projectNameIndex:0, // 选项名称
			lotteryTypeIndex:0, // 彩票类型
			projectName:'',
			lotteryNo:0,
			resultContent:"",
			is_read:false,
		};
	},
	onLoad(query) {
		this.phoneNumber = query.phoneNumber
		this.projectNameIndex =  query.projectNameIndex
		this.lotteryTypeIndex =  query.lotteryTypeIndex
		this.projectName = query.projectName
		this.lotteryNo = query.lotteryNo
		this.getSubmitRecordByPhoneAndType() // 先获得期号
	},
	methods:{
		getProfit(item){
			let profit= item.count*item.commission*0.4
			return parseFloat(profit).toFixed(2)
		},
		async getTransactionHistoryById(id){
		let data = await this.$myRequest({
				method: 'get',
				url: '/transactionHistory/getTransactionHistoryById',
				data: {"productId":id}
			})
			return data
		},
		copyData(){
			const textToCopy = this.resultContent.join(' ');
			uni.setClipboardData({
				data: textToCopy,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		getLastLotteryNo(){ // 获取最新期号
				  this.$myRequest({
				  	method: 'get',
				  	url: '/getLastLotteryNo',
				  	data: {type:'plw'}
				  }).then((res) => {
					  if(res.flag){
						   this.lotteryNo = Number(res.data)+1
						   this.getSubmitRecordByPhoneAndType()
					  }
				})
		},
		 getSubmitRecordByPhoneAndType(){
			this.$myRequest({
			  	method: 'get',
			  	url: '/submit/getSubmitRecordByPhoneAndType',
			  	data: {
						'lotteryTypeIndex':this.lotteryTypeIndex,
						'projectNameIndex':this.projectNameIndex,
						'phoneNumber':this.phoneNumber
					}
			  }).then((res) => {
				  if(res.flag){
					   this.tableData = res.data
				  }
			})
		},
		changeFlag(item){
			let msg = "未中奖"
			if(item.lotteryNo == this.lotteryNo && item.flag == 0 ){
				msg =  "<view style='color:blue'>当日推荐号</view>"
			}else if(item.flag == 0){
				msg =  "未中奖"
			}else if(item.flag == 1){
				msg =  "<view style='color:red'>中奖</view>"
			}
			return msg
		},
		// 查看奖号
		async toView(item){
			if(item.lotteryNo == this.lotteryNo && item.flag == 0 ){
				let phone = uni.getStorageSync("phone")
				if(item.phone == phone){
					// 查看自己的不需要付费
					// this.resultContent = JSON.parse(item.result)
					// this.$refs.alertDialog.open()
					this.toSubmitView(item)
				}else{
					if(item.status==1){ // 这里是免费
						// this.resultContent = JSON.parse(item.result)
						// this.$refs.alertDialog.open()
						this.toSubmitView(item)
					}else{ // 这里是付费 
						let res = await this.getTransactionHistoryById(item.id);
						if(res.flag&&res.data>0){
							// this.resultContent = JSON.parse(item.result)
							// this.$refs.alertDialog.open()
							this.toSubmitView(item)
						}else{
							let that  = this
							uni.showModal({
								title: '提示',
								content: `本次查看需要消费${item.commission}个金币，是否消费？`,
								success: function (res) {
									if (res.confirm) {
										// 后台扣款
										that.payCommission(item);
									}
								}
							})
						}
					}
					
				}
			
			}
		},
		toSubmitView(item){
			uni.navigateTo({
				url: `/pages/lottery/index/result?item=${JSON.stringify(item)}`
			});
		},
		payCommission(item){ //扣费并且查看次数增加 记录用户消费信息，下次直接查看
			this.$myRequest({
			  	method: 'post',
			  	url: '/submit/payCommission',
			  	data: {
						'id':item.id, 
						'commission':item.commission// 佣金
					}
			  }).then((res) => {
				  if(res.flag){
					  uni.showToast({
					  	title: '支付成功！'
					  });
					  let that = this
					  setTimeout(function() {
						   that.getSubmitRecordByPhoneAndType()
						   // that.resultContent = JSON.parse(item.result)
						   // that.$refs.alertDialog.open()
						   that.toSubmitView(item)
					  },300)
					 
				  }else{
					  uni.showToast({
					  	title: res.data
					  });
				  }
			})
			
		}
	}
};
</script>

<style lang="scss">
	
	.spliceAllText {
		float: left;
		font-size: 20px;
		padding-top: 15px;
		margin-left: 5px;
	}
	.center-col {
	  display: flex;
	  justify-content: center; /* 水平居中 */
	  align-items: center;     /* 垂直居中 */
	  height: 100%;            /* 根据需要设置高度 */
	}
	
	.content {
	  /* 根据需要设置内容样式 */
	  text-align: center;
	}
 .textzhu {
 	padding-top: 10rpx;
 	font-size: 21px;
 }
.da {
	width: 100%;
	border: 1px solid gainsboro;
	display: flex;
	justify-content: center; /* 列内水平居中 */
	align-items: center; /* 列内垂直居中 */
	height: 420px; /* 确保列高度100% */
}
</style>
